<template>
	<view class="container">
		<!--选项卡.开始-->
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index)">
				{{item.text}}
			</view>
		</view>
		<!--选项卡.结束-->
		
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view scroll-y class="list-scroll-content" @scrolltolower="loadData">
					<!--订单列表.开始-->
					<navigator v-for="(item,index) in tabItem.listData" 
						:key="index" 
						:url="'show?id='+item.id"
						class="order-item">
						<view class="head-box">
							<text class="time">{{item.merchantTitle}}</text>
							<text class="state" :class="{red:item.status===1}">{{orderStateExp(item)}}</text>
						</view>
						<view class="goods-box" 
							v-for="(goodsItem, goodsIndex) in item.orderGoods" 
							:key="goodsIndex">
							<view @click.stop="linkUrl('../goods/show?id='+goodsItem.goodsId)" class="img-box">
								<image mode="widthFix" :src="$api.loadFile(goodsItem.imgUrl)"></image>
							</view>
							<view class="right">
								<text class="title">{{goodsItem.goodsTitle}}</text>
								<text class="attr">{{goodsItem.skuText}}  x {{goodsItem.quantity}}</text>
								<text class="price">{{goodsItem.realPrice}}</text>
							</view>
						</view>
						<view class="total-box">
							<view class="label-box">
								<text v-if="item.orderType===1" class="text">限时抢购</text>
								<text v-if="item.orderType===2" class="text">商品预售</text>
								<text v-if="item.orderType===3" class="text">积分换购</text>
							</view>
							<view class="price-box">
								共
								<text class="num">{{item.orderGoods.length}}</text>
								件商品 实付款
								<text class="price">{{item.orderAmount}}</text>
							</view>
						</view>
						<view class="info-box" v-if="item.orderType==2">
							<view class="text">
								<text class="tip">尾款支付时段</text>
								<text>{{item.retainStartTime}} - {{item.retainEndTime}}</text>
							</view>
						</view>
						<view class="btn-box">
							<button v-if="item.status<3&&item.paymentStatus==0" @click.stop="cancelOrder(item)" class="btn">取消订单</button>
							<button v-if="item.status===1&&item.paymentStatus==0" @click.stop="linkUrl('../payment/confirm?no='+item.tradeNo)" class="btn red">立即付款</button>
							<button v-if="item.status===1&&item.paymentStatus==1&&item.tradeStatus==0" @click.stop="linkUrl('../payment/confirm?no='+item.tradeNo)" class="btn red">支付尾款</button>
							<button v-if="item.deliveryStatus>0" @click.stop="linkUrl('delivery?no='+item.orderNo)" class="btn">查看物流</button>
							<button v-if="item.status==3||item.status==4" @click.stop="confirmOrder(item)" class="btn red">确认收货</button>
							<button v-if="item.status==5&&item.orderGoods.find(val=>val.evaluateStatus===0)" @click.stop="linkUrl('../evaluate/edit?id='+item.id)" class="btn red">去评价</button>
							<button v-if="item.status>2&&item.status<6" @click.stop="linkUrl('../refund/list?no='+item.orderNo)" class="btn">售后服务</button>
						</view>
					</navigator>
					<!--底部显示加载效果-->
					<uni-load-more :status="tabItem.loadingType" @clickLoadMore="loadData"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				pageSize: 10, //每页显示条数
				navList: [{
						state: 0,
						text: '全部',
						loadingType: 'more',
						totalCount: 0, //总数量
						totalPages: 0, //总页数
						pageIndex: 1, //当前页码
						listData: []
					},
					{
						state: 1,
						text: '待付款',
						loadingType: 'more',
						totalCount: 0, //总数量
						totalPages: 0, //总页数
						pageIndex: 1, //当前页码
						listData: []
					},
					{
						state: 2,
						text: '待发货',
						loadingType: 'more',
						totalCount: 0, //总数量
						totalPages: 0, //总页数
						pageIndex: 1, //当前页码
						listData: []
					},
					{
						state: 3,
						text: '待收货',
						loadingType: 'more',
						totalCount: 0, //总数量
						totalPages: 0, //总页数
						pageIndex: 1, //当前页码
						listData: []
					},
					{
						state: 4,
						text: '待评价',
						loadingType: 'more',
						totalCount: 0, //总数量
						totalPages: 0, //总页数
						pageIndex: 1, //当前页码
						listData: []
					}
				],
			}
		},
		methods: {
			//获取订单列表
			async loadData(source){
				let _this = this;
				//这里是将订单挂载到tab列表下
				let index = _this.tabCurrentIndex;
				let navItem = _this.navList[index];
				let state = navItem.state;
				
				if(source === 'tabChange' && navItem.loaded === true){
					//tab切换只有第一次需要加载数据
					return;
				}
				if(navItem.loadingType === 'nomore' || navItem.loadingType === 'loading'){
					//防止重复加载
					return;
				}
				//显示加载效果
				navItem.loadingType = 'loading';
				//加载订单列表
				let sendUrl=`/account/order?pageSize=${_this.pageSize}&pageIndex=${navItem.pageIndex}&status=${state}`;
				//请求API
				await _this.$api.request({
					url: sendUrl,
					loading: true
				}).then(res=>{
					let pageInfo = JSON.parse(res.header["x-pagination"]);
					navItem.totalCount = pageInfo.totalCount;
					navItem.totalPages = pageInfo.totalPages;
					let listData = res.data;
					//循环查找收款信息赋值
					listData.forEach(item=>{
						//如果未付款
						//if(item.status==1){
							//判断是否预售
							if(item.orderType==2){
								//检查预付款是否已付
								let collectionType=2; //默认查找尾款
								if(item.paymentStatus==0){
									collectionType=1;
								}
								let modelt = item.collectionRelations.find(val=>val.collection.collectionType==collectionType)
								if(modelt){
									let collection = modelt.collection;
									let tradeStatus = _this.checkDate(collection.startTime, collection.endTime);
									_this.$set(item, 'tradeNo', collection.tradeNo);
									_this.$set(item, 'tradeStatus', tradeStatus);
								}
							}else{
								let collection = item.collectionRelations[0].collection;
								let tradeStatus = _this.checkDate(collection.startTime, collection.endTime);
								_this.$set(item, 'tradeNo', collection.tradeNo);
								_this.$set(item, 'tradeStatus', tradeStatus);
							}
						//}
					});
					//console.log(listData)
					navItem.listData = navItem.listData.concat(listData);
				}).catch((err)=>{
					navItem.loadingType="nomore";
				});
				//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
				this.$set(navItem, 'loaded', true);
				//判断是否还有下一页
				if(navItem.pageIndex >= navItem.totalPages){
					navItem.loadingType="nomore";
				}else{
					navItem.pageIndex++;
					navItem.loadingType="more";
				}
			},
			//swiper切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index){
				this.tabCurrentIndex = index;
			},
			//订单状态
			orderStateExp(item){
				let stateTip = '已下单';
				if(item.status===1){
					stateTip = '待付款';
					//如果是预售订单
					if(item.orderType==2){
						if(item.paymentStatus==1){
							stateTip = '待付尾款';
						}
						if(item.paymentStatus==1&&item.tradeStatus==2){
							stateTip = '活动已失效';
						}
					}
				}else if(item.status===2){
					stateTip = '待发货';
				}else if(item.status===3){
					stateTip = '待收货';
				}else if(item.status===4){
					stateTip = '已签收';
				}else if(item.status===5){
					stateTip = '交易成功';
					if(item.orderGoods.find(val=>val.evaluateStatus===0)){
						stateTip = '待评价';
					}
				}else if(item.status===6){
					stateTip = '交易取消';
				}else if(item.status===7){
					stateTip = '交易作废';
				}
				return stateTip;
			},
			//取消订单
			cancelOrder(item){
				let _this = this;
				uni.showModal({
					title: '操作提示',
					content: '确认要取消该订单吗？',
					success(res) {
						if (res.confirm) {
							_this.$api.request({
								url: `/account/order/collection/cancel/${item.tradeNo}`,
								method: "put",
								loading: true
							}).then(res=>{
								item.status = 6; //更改订单状态
								_this.$api.msg(`订单已取消`, 1500, false, 'success');
							});
						}
					}
				});
			},
			//确认收货
			confirmOrder(item){
				let _this = this;
				uni.showModal({
					title: '操作提示',
					content: '确认已收到货了吗？',
					success(res) {
						if (res.confirm) {
							_this.$api.request({
								url: `/account/order/confirm/${item.id}`,
								method: "put",
								loading: true
							}).then(res=>{
								item.status = 5; //更改订单状态
								_this.$api.msg(`交易成功`, 1500, false, 'success');
							});
						}
					}
				});
			},
			//返回时间对比状态
			checkDate(beginDateStr, endDateStr) {
				var curDate = new Date(),
				beginDate = new Date(beginDateStr),
				endDate = new Date(endDateStr);
				if (curDate < beginDate) {
					return 1;
				}
				if (curDate > endDate) {
					return 2;
				}
				return 0;
			},
			//跳转链接
			linkUrl(url){
				uni.navigateTo({
					url: url
				});
			},
		},
		onLoad(options){
			/**
			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
			 * 替换onLoad下代码即可
			 */
			if(options.state){
				this.tabCurrentIndex = +options.state;
			}
			//console.log(this.tabCurrentIndex)
			// #ifndef MP
			this.loadData()
			// #endif
			// #ifdef MP
			if(!options.state || options.state == 0){
				this.loadData()
			}
			// #endif
		}
	}
</script>

<style lang="scss">
	page,.container{
		height: 100%;
	}
	.navbar{
		display: flex;
		height: 80rpx;
		padding: 0 10rpx;
		background: #fff;
		box-shadow: 0 2rpx 8rpx rgba($color: #000, $alpha: 0.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: #333;
			position: relative;
			&.current{
				color: #fa436a;
				&:after{
					content: "";
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 88rpx;
					height: 0;
					border-bottom: 4rpx solid #fa436a;
				}
			}
		}
	}
	.swiper-box{
		height: calc(100% - 80rpx);
		.tab-content{
			.list-scroll-content{
				height: 100%;
				.order-item{
					display: flex;
					flex-direction: column;
					margin: 24rpx;
					border-radius: 20rpx;
					background: #fff;
					.head-box{
						display: flex;
						align-items: center;
						position: relative;
						padding: 0 30rpx;
						height: 80rpx;
						color: #333;
						font-size: 28rpx;
						.time{
							flex: 1;
						}
						.state{
							color: #999;
							&.red{
								color: #fa436a;
							}
						}
						.btn{
							position: relative;
							padding: 10rpx 0 10rpx 36rpx;
							font-size: 32rpx;
							color: #999;
							&:after{
								content: "";
								width: 0;
								height: 30rpx;
								border-left: 2rpx solid #DCDFE6;
								position: absolute;
								left: 20rpx;
								top: 50%;
								transform: translateY(-50%);
							}
						}
					}
					.goods-box{
						display: flex;
						padding: 20rpx 0 20rpx 30rpx;
						border-top: 2rpx solid #f5f5f5;
						.img-box{
							display: flex;
							align-items: center;
							box-sizing: border-box;
							padding: 2rpx;
							width: 136rpx;
							height: 136rpx;
							border-radius: 20rpx;
							background: #f5f5f5;
							image{
								border-radius: 20rpx;
								width: 100%;
							}
						}
						.right{
							flex: 1;
							display: flex;
							flex-direction: column;
							padding: 0 30rpx 0 24rpx;
							overflow: hidden;
							.title{
								font-size: 30rpx;
								color: #333;
								line-height: 1;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
							.attr{
								color: #999;
								font-size: 26rpx;
								line-height: 1;
								padding: 20rpx 0;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
							.price{
								color: #333;
								font-size:30rpx;
								line-height: 1;
								&:before{
									content: '￥';
									font-size: 24rpx;
								}
							}
						}
					}
					.total-box{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-bottom: 10rpx;
						.label-box{
							padding: 20rpx 30rpx;
							.text{
								padding: 4rpx 10rpx;
								color: #fa436a;
								font-size: 24rpx;
								line-height: 1;
								border: 2rpx solid #999;
								border-radius: 6rpx;
							}
						}
						.price-box{
							display: flex;
							justify-content: flex-end;
							align-items: baseline;
							padding: 20rpx 30rpx;
							font-size: 26rpx;
							color: #999;
							.num{
								margin: 0 8rpx;
								color: #333;
							}
							.price{
								font-size: 32rpx;
								color: #333;
								&:before{
									content: '￥';
									font-size: 24rpx;
									margin: 0 2rpx 0 8rpx;
								}
							}
						}
					}
					.info-box{
						display: flex;
						justify-content: end;
						padding: 24rpx;
						.text{
							color: #333;
							font-size: 20rpx;
							line-height: 40rpx;
							.tip{
								margin-right: 20rpx;
								color: #999;
							}
						}
					}
					.btn-box{
						display: flex;
						justify-content: flex-end;
						align-items: center;
						position: relative;
						padding-right: 30rpx;
						border-top: 2rpx solid #f5f5f5;
						.btn{
							width: 160rpx;
							height: 60rpx;
							margin: 20rpx 0 20rpx 24rpx;
							padding: 0;
							text-align: center;
							line-height: 60rpx;
							font-size: 26rpx;
							color: #333;
							background: #fff;
							border-radius: 100px;
							&:after{
								border-radius: 120rpx;
							}
							&.red{
								color: #fa436a;
								background: #fff9f9;
								&:after{
									border-color: #f7bcc8;
								}
							}
						}
					}
				}
			}
		}
	}
</style>